<template>
  <div>
    <el-button
      type="primary"
      :btnLoading="categoryLoading"
      @click="getCategories"
      >添加分类</el-button
    >
    <!-- 表格 -->
    <Table
      :tp="{ hasChildren: 'hasChildren', children: 'children' }"
      rowKey="cat_id"
      v-model="queryModel"
      :loading="queryLoading"
      :cols="cols"
      :total="total"
      :data="list"
      @change="getcategoryList"
    >
      <template v-slot:scicon="{ row: { cat_deleted } }">
        <i
          :style="{ color: cat_deleted ? 'red' : 'green' }"
          :class="cat_deleted ? 'el-icom-error' : 'el-icon-success'"
        >
        </i>
      </template>
      <template v-slot:level="{ row: { cat_level } }">
        <el-tag :type="colors[cat_level]"> {{ levels[cat_level] }}级 </el-tag>
      </template>
      <template v-slot:action="{ row }">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click="
            model = { ...row };
            $refs.d.show();
          "
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="delCategory(row)"
          >删除</el-button
        >
      </template>
    </Table>
    <!-- 添加修改 -->
    <MyDialog :title="this.title + '分类'" ref="d" lw="80px" @confirm="confirm">
      <MyForm ref="from" v-model="model" :opts="opts" width="100px"> </MyForm>
    </MyDialog>
  </div>
</template>

<script>
import {
  categoryList,
  deleteCategory,
  addCategory,
  updateCategory,
} from "api/goods.js";
import Table from "../../../components/Table.vue";
import MyDialog from "../../../components/Dialog.vue";
import MyForm from "../../../components/Form.vue";
import { pageMixins } from "@/mixins/baseMixins";

export default {
  mixins: [pageMixins],
  name: "categories",
  components: { Table, MyDialog, MyForm },
  data() {
    return {
      categoryLoading: false,
      //分类列表
      categories: [],
      /**
       * 添加修改模型
       */
      model: {},
      total: 0,
      /**
       * 等级
       */
      levels: ["一", "二", "三"],
      /**
       * 颜色
       */
      colors: ["", "success", "warning"],
      /**
       * 列
       */
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "分类名称",
          name: "cat_name",
        },
        {
          title: "是否有效",
          slot: "scicon",
        },
        {
          title: "排序",
          slot: "level",
        },
        {
          title: "操作",
          slot: "action",
          width: "270",
          align: "center",
        },
      ],
      /**
       * 查询模型
       */
      queryModel: {
        ...this.queryModel,
        type: 3,
      },
    };
  },

  created() {
    this.getcategoryList();
  },
  methods: {
    //添加修改
    async confirm() {
      const d = this.$refs.d;
      try {
        d.start();
        await (this.model.cat_id ? updateCategory : addCategory)({...this.model,...(this.model.cat_id ? {}: {
                cat_pid: this.model.cat_pid?.slice(-1)[0] ?? 0,
                cat_level: this.model.cat_pid?.length ?? 0,
              }),
        });
        d.hide();
        this.$message.success(this.title + "成功");
        this.getcategoryList();
        d.hide();
      } catch (error) {
        console.log(error);
      }
      d.stop();
    },
    //获取分类列表
    async getCategories() {
      try {
        this.categoryLoading = true;
        this.categories = await categoryList({ type: 2 });
        this.model = {};
        this.$refs.d.show();
      } catch (error) {
        console.log(error);
      }
      this.categoryLoading = false;
    },
    //删除
    async delCategory({ cat_id }) {
      let res;
      try {
        await deleteCategory(cat_id);
        this.getcategoryList();
        this.$message.success("删除成功");
      } catch (error) {}
      res && res();
    },
    //渲染
    async getcategoryList() {
      try {
        this.queryLoading = true;
        const { total, result } = await categoryList(this.queryModel);
        this.list = result;
        this.total = total;
      } catch (error) {}
      this.queryLoading = false;
    },
  },
  computed: {
    /**
     * 标题
     */
    title() {
      return this.model.cat_id ? "修改" : "添加";
    },
    /**
     * 表单配置项
     */
    opts() {
      return {
        cat_name: {
          title: "分类名称",
          required: true,
          max: 20,
        },
        ...(this.model.cat_id
          ? {}
          : {
              cat_pid: {
                title: "父级分类",
                tag: "cas",
                // style:{width:'100%'},
                options: this.categories,
                props: { value: "cat_id", label: "cat_name" },
              },
            }),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
</style>